{% extends "base.html" %}

{% block additional_head %}
<!--Importing user settings to javascript, It seems it has to be before anything else-->
{%autoescape off%}
<script type="text/javascript">
var settings = 
{% if user_settings %}
	{{ user_settings }};
{% else %}
	{};
{% endif %}
var query = { read: "{{ read }}", dbentry: "{{ dbentry }}", enzyme: "{{ enzyme }}",
		bitscore: {{ bitscore }}, evalue: {{ evalue }}, hits: {{ hits }}, depth: {{ depth }},
		samples: []};
{% for sample in samples %}
		query.samples.push('{{ sample }}');
{% endfor %}
{% if view_id %}
		query.view_id = {{ view_id }};
{% endif %}
</script>
{% endautoescape %}
<!-- JIT Library File -->
<script type="text/javascript" src="{{ STATIC_URL }}JIT.js"></script>

<link rel="stylesheet" href="{{ STATIC_URL }}base.css" type="text/css"/>
<link type="text/css" href="{{ STATIC_URL }}ui-lightness/jquery-ui.css" rel="stylesheet" />	

<script type="text/javascript" src="{{ STATIC_URL}}jquery.contextmenu.r2.js"></script>

<!-- RGraph configuration settings -->
<script type="text/javascript" src="{{ STATIC_URL }}js/bitscore.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/config.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/contextmenu.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/events.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/labels.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/loadsave.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/navigation.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/moreinfo.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/styles.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/tips.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/graphviz.js"></script>

<script type="text/javascript">
$(function() {
	initGraph();
});
</script>
<!-- jQuery-UI, for autocomplete -->
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui.js"></script>

{% endblock %}

{% block additional_title %}{% endblock %}
{% block content %}
<div id="graphnavi" class="transparent">
<img id="optiontag" src="{{ STATIC_URL }}images/options.png" alt="display options"/>
<div id="navicontainer">
<form id="graphrefreshform" action="graphrefresh" method="post">{% csrf_token %} <!--protects from cross site request forgery-->
	<table><tr><td colspan="2" class="center">
		<strong>Get a new graph:</strong>
	</td></tr>
	{% if error_message  %}
		<tr><td>
			<script type="text/javascript">openSearch();</script>
			<p id="navierror">{{ error_message }}</p>
		</td></tr>
	{% else %}
	{% endif %}
	<tr><td colspan="2" class="center">
		<p>(Input only one of the three following)</p>
	</td></tr><tr><td>
		<label>Enzyme:</label>
	</td><td>
		<input size="10" type="text" name="enzyme" id="ec" value="{{ enzyme }}"/>
		{% if enzyme_list %}
			</td></tr><tr><td colspan="2" class="center">Multiple enzymes matched, pick one:
			{% for e in enzyme_list %}
				</td></tr><tr><td colspan="2" class="center"><p class="submitForm">{{ e.enzyme_name }} ({{ e.ec_number }})</p>
			{% endfor %}
		{% endif %}
	</td></tr><tr><td>
		<label>Read id:</label>
	</td><td>
		<input size="10" type="text" name="read" value="{{ read }}"/>
	</td></tr><tr><td>
		<label>DB entry id:</label>
	</td><td>
		<input size="10" type="text" name="dbentry" value="{{ dbentry }}"/>
	</td></tr><tr><td>
		<label>Minimum bitscore:</label>
	</td><td>
		<input size="10" type="text" name="bitscore" value="{{ bitscore }}"/>
	</td></tr><tr><td>
		<label>Maximum e-value:</label>
	</td><td>
		<input size="10" type="text" name="evalue" value="{{ evalue }}"/>
	</td></tr><tr><td>
		<label>Depth:</label>
	</td><td>
		<input size="10" type="text" name="depth" value="{{ depth }}"/>
	</td></tr><tr><td>
		<label>Hits per node:</label>
	</td><td>
		<input size="10" type="text" name="hits" value="{{ hits }}" />
	</td></tr>
	<tr><td colspan="2" style="text-align: center;">
		<span id="sampleslink">Click to select samples</span><br/>
		<span>Default: use all samples</span><br/>
		<div id="samples">
			<label>Samples:</label><br/>
			<div id="samplelist">
			{% for sample in all_samples %}
				{% if sample in samples %}
					<input type="checkbox" name="samples" value="{{ sample }}" checked="checked"/> {{ sample }}<br/>
				{% else %}
					<input type="checkbox" name="samples" value="{{ sample }}" /> {{ sample }}<br/>
				{% endif %}
			{% endfor %}
			</div>
		</div>
	</td></tr>
	<tr><td colspan="2" style="text-align: center;">
		<input id="graphrefresh" type="submit" value="Refresh page" size="10"/>
	</td></tr>
	<tr><td colspan="2">
		<div id="savedViews" style="text-align: center;">
		{% if saved_views %}
			<p>Your saved views:</p>
		{% endif %}
		</div>
		<script type="text/javascript">
		{% for view in saved_views %}
			addSavedViewToList('{{ view.id }}', '{{ view.name }}');
		{% endfor %}
		</script>
	</td></tr>
	</table>
</form>


<script type="text/javascript">
	$(function()
	{
		$( "#ec" ).autocomplete(
		{
			source: '/autocomplete',
			appendTo: '#navicontainer',
			position: { my : "center top", at: "center bottom"}
		});
	});
</script>
</div>
</div>
    <div class="contextMenu" id="nodeMenu">
        <ul> 
             <li id="close">Close menu</li>
             <li id="n_center">Center Node</li>
			 <li id="n_more">More connections</li>
             <li id="e_align">Show Alignment</li>
             <li id="n_tag">Tag/Untag Node</li>
             <li id="n_tagsubnodes">Tag Children</li>
             <li id="n_tagsubgraph">Tag Subgraph</li>
             <li id="n_untagsubgraph">Untag Subgraph</li>
			 <li id="n_en_names">Show info</li>
			 <li id="n_en_brendalink">Brenda</li>
			 <li id="n_en_kegglink">KEGG</li>
			 <li id="n_db_uni_link">Uniprot</li>
			 <li id="n_db_frn_link">Frnadb</li>
			 <li id="n_db_silva_link">Silva</li>
        </ul>
    </div>
    <div id="loader"><img src="../static/images/loader.gif" alt="Loading..."/></div>

	<div id="container">		
		<div id="graphcontainer">
			<div id="center-container">
				<span id="load"></span>
				<div id="infovis"></div>
			</div>

			<div id="right-container">
				<a id="logoutbutton" href="logging_out">Logout</a>
				<a id="helplink" target="_blank" href="show_help">Help</a>
				<br/>
					<button id="deleteUntagged">Delete all untagged</button><br/>
					<button id="undo" disabled="disabled">Undo</button>
					<br/><br/>
				<div id="coloring">
					<form action="/"  id="colorform">
						<label><strong>Coloring</strong></label><br/>
						<input type="radio" name="colortype" id="colortypeDynamic" value="dynamic" checked="checked"/>Dynamic<br/>
						<input type="radio" name="colortype" id="colortypeCustom" value="custom"/>Custom: 
						<input type="text" id="colorMin" size="4" disabled="disabled"/>-<input type="text" id="colorMax" size="4" disabled="disabled"/><br/>
						<input type="submit" id="colorizeSubmit" value="Colorize"/>
						<span id="colorErrorMsg" class="error"></span>
					</form>
				</div>
				<br/>
				<span id="filtertext">Filter graph</span>
				<div id="filter">
					<form id="filterform" action="/" method="post">
						<span id="filtererror"></span>
						<p>Filter the currently visible graph with bitscore:</p>
						<input size="10" type="text" name="bitscorefilter" id="bitscorefilter" value="{{ bitscore }}"/>
						<input id="filterbutton" type="submit" value="Filter"/><br/>
					</form>
				</div>
				<br/>
				<form action="/" method="post" id="saveGraph">
					<strong>Save</strong> current view as: <br/><input type="text" size="10" id="savedGraphName" maxlength="30"/>
					<input type="submit" value="Save"/> 
					<span id="saveGraphStatus"></span>
				</form>
				<br/>
				<span id="settingslink">Your settings</span><span style="color:red;" id="settingmessage"></span><br/>
				<div id="settings">
					<form id="settingsform" action="/" method="post">
						{% csrf_token %}
						<label>Canvas size:</label><br/>
						<input type="text" size="6" name="canvas_x" id="canvas_x" value=""/> x <input type="text" size="6" name="canvas_y" id="canvas_y" value=""/><br/>
						<label>Animations:</label><br/>
						<input type="radio" name="group1" value="animations_on" id="animations_on" checked="checked"/> On<br/>
						<input type="radio" name="group1" value="animations_off" id="animations_off"/> Off<br/>
						<label>Animation speed in ms:</label><br/>
						<input size="7" type="text" name="duration" id ="duration" value="" /><br/>
						<label>Animation type:</label><br/>
						<select id="animationtype" name="animationtype">
						  <option value="linear">Linear</option>
						  <option value="Quad">Quadratic</option>
						  <option value="Cubic">Cubic</option>
						  <option value="Quart">Quartetic</option>
						  <option value="Quint">Quintic</option>
						  <option value="Expo">Exponential</option>
						  <option value="Circ">Circular</option>
						  <option value="Sine">Sineousidal</option>
						  <option value="Bounce">Bounce</option>
						  <option value="Back">Back</option>
						  <option value="Elastic">Elastic</option>
						</select><br/>
						<label>Animation subtype:<br/>
						Note: does not affect linear transitions</label><br/>
						<select name="animationsubtype" id="animationsubtype">
							<option value="easeIn">Ease in</option>
							<option value="easeOut">Ease out</option>
							<option value="easeInOut">Ease in and out</option>
						</select><br/>
						<p><strong>Note</strong>: changes will be in effect after reloading the page</p>
						<input id="savesettings" name="savesettings" type="submit" value="Save your settings" style="margin-bottom:4px;"/><br/>
					</form>
					<form id="defaultsettingsForm" method="post" action="/">
						{% csrf_token %}
						<input type="hidden" name="defaultsettings" value="true"/>
						<input id="defaultsettings" name="defaultsettings" type="submit" value="Switch to defaults"/>
					</form>
				</div>
				<div id="names"></div>
				<br/>
				<br/>
			</div>

			<div id="log"></div>
		</div>
		<div id="alignment"></div>
	</div>
{% endblock %}

